<template>
  <div class="vip-list">
    <!-- 我的会员 -->
    <div class="vip-page">
      <div class="vip-content">
        <!-- 右边 -->
        <div class="right">
          <div class="scrollbar-container">
            <el-scrollbar style="height: 100%" class="hid-scrollbar-x">
              <el-form
                ref="filterForm"
                :rules="rules"
                :model="filterForm"
                label-width="120px"
                size="small"
                inline
              >
                <el-form-item label="用户名称" prop="customerName">
                  <el-input
                    v-model="filterForm.customerName"
                    placeholder="用户名称"
                    type="text"
                    size="small"
                    clearable
                    style="max-width: 180px"
                    maxlength="50"
                  />
                </el-form-item>
                <el-form-item label="用户手机号" prop="phone">
                  <el-input
                    v-model="filterForm.phone"
                    placeholder="用户手机号"
                    type="text"
                    size="small"
                    clearable
                    style="max-width: 180px"
                    maxlength="11"
                  />
                </el-form-item>
                <el-form-item label="">
                  <el-date-picker
                    v-model="filterTime"
                    :clearable="false"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    size="small"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
                <!-- 筛选 -->
                <!--  <div class="app-main-filter-collapse-box">-->
                <!-- <el-collapse-transition>
                  <div v-show="isShowMoreFilter">
                    <el-form-item label="时间">
                      <el-radio-group
                        v-model="dateType"
                        size="small"
                        @change="dataRadioChange"
                      >
                        <el-radio-button :label="1">今天</el-radio-button>
                        <el-radio-button label="yesterday"
                          >昨天</el-radio-button
                        >
                        <el-radio-button :label="7">近7天</el-radio-button>
                        <el-radio-button :label="15">近15天</el-radio-button>
                        <el-radio-button :label="30">近30天</el-radio-button>
                        <el-radio-button label="nowMonth">本月</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="">
                      <el-date-picker
                        v-model="filterTime"
                        :clearable="false"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="['00:00:00', '23:59:59']"
                        size="small"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="pickerChange"
                      />
                    </el-form-item>
                  </div>
                </el-collapse-transition> -->

                <!-- 按钮组 -->
                <!-- <div> -->
                <el-form-item label=" " class="filter-btn">
                  <el-button
                    :loading="searchLoading"
                    type="primary"
                    round
                    @click="submitFilterForm"
                    >查 询</el-button
                  >
                  <!-- <el-button
                      type="text"
                      round
                      @click="isShowMoreFilter = !isShowMoreFilter"
                      >{{
                        isShowMoreFilter ? "隐藏" : "更多"
                      }}筛选条件</el-button
                    > -->
                  <el-button type="primary" round @click="resetFilterForm"
                    >重置筛选条件</el-button
                  >
                </el-form-item>
                <!-- </div> -->
              </el-form>

              <!-- 表格内容 -->
              <div class="list-table hasCheckbox">
                <!-- 数据概览 -->
                <div
                  class="flex-x-start flex-wrap"
                  style="margin: 0 0 14px 40px"
                >
                  <div style="margin-bottom: 10px">
                    <i
                      class="el-icon-info"
                      style="
                        font-size: 20px;
                        color: #999;
                        margin-right: 10px;
                        line-height: 20px;
                      "
                    />
                    <span style="line-height: 20px">
                      累计用户数：
                      <strong style="font-size: 24px; margin: 0 60px 0 20px">{{
                        countGather.totalUserCount || 0
                      }}</strong>
                    </span>
                  </div>
                  <div style="margin-bottom: 10px">
                    <i
                      class="el-icon-info"
                      style="
                        font-size: 20px;
                        color: #999;
                        margin-right: 10px;
                        line-height: 20px;
                      "
                    />
                    <span style="line-height: 20px">
                      用户数：
                      <strong style="font-size: 24px; margin: 0 60px 0 20px">{{
                        countGather.addUserCount || 0
                      }}</strong>
                    </span>
                  </div>
                  <!-- <div style="margin-bottom: 10px" v-if="showStoreVal">
                    <i
                      class="el-icon-info"
                      style="
                        font-size: 20px;
                        color: #999;
                        margin-right: 10px;
                        line-height: 20px;
                      "
                    />
                    <span style="line-height: 20px">
                      储值人数：
                      <strong style="font-size: 24px; margin: 0 60px 0 20px">{{
                        countGather.storedUserCount || 0
                      }}</strong>
                    </span>
                  </div> -->
                </div>
                <!-- <el-button
                  :disabled="selectSign"
                  type="text"
                  round
                  @click="batchOption"
                  >批量操作</el-button
                > -->

                <!-- 表格内容 -->
                <el-table
                  ref="memberTable"
                  v-loading="tableLoading"
                  :data="list"
                  stripe
                  style="width: 100%"
                  size="small"
                  element-loading-text="加载中"
                  empty-text="暂无数据"
                  @selection-change="handleClick($event)"
                >
                  <el-table-column type="selection" width="50" />
                  <el-table-column label="用户" max-width="300" fixed>
                    <template slot-scope="scope">
                      <div class="vip-member">
                        <div class="vip-avatar">
                          <img
                            v-if="scope.row.headImg"
                            :src="scope.row.headImg"
                            alt
                          />
                        </div>
                        <div>
                          <div class="vip-name">
                            {{ scope.row.customerName || "(空）" }}
                          </div>
                          <div class="vip-detail">
                            手机号：{{ scope.row.phone || "无" }}
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="资产" max-width="240">
                    <template slot-scope="scope">
                      <span class="vip-detail"
                        >余额：{{
                          (scope.row.totalBalance / 100).toFixed(2)
                        }}
                        元</span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="注册时间" prop="registerTime" />
                  <el-table-column label="最近消费日期">
                    <template slot-scope="scope">
                      {{ scope.row.recentConsumeTime || "--" }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="60" fixed="right">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="goVipDetail(scope.$index, scope.row)"
                        >详情</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 分页 -->
                <pagination-direction
                  v-if="paginationConfig.total !== 0"
                  :config="paginationConfig"
                  @sizeschange="sizesChange"
                  @pagechange="pageChange"
                />
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>

    <!-- 批量操作 -->
    <modify-form
      v-if="activeName === 'modifyForm'"
      ref="modifyForm"
      :select-option="selectOption"
      :select-group-id="selectGroupId"
      @changeTabName="changeTabName"
    />

    <!-- 会员导入 -->
    <vip-import
      v-if="activeName === 'vipImport'"
      @changeTabName="changeTabName"
    />

    <!-- 操作历史 -->
    <modify-record v-if="activeName === 'accountHistory'" />

    <!-- 导入历史 -->
    <import-record
      v-if="activeName === 'historyImport'"
      @changeTabName="changeTabName"
    />
  </div>
</template>

<script>
import { userCountInfo, pubManageUserlist } from "@/publicApi/publicDomain";
import { validateMobilePhone } from "@/utils/validate";
import { mapState } from "vuex";
import { getFilterFormPastTime } from "@/utils/format";

export default {
  components: {},
  data() {
    /**
     * 表单校验方法相关
     */
    // 检验手机号
    const validatePhones = (rule, value, callback) => {
      if (value) {
        if (!validateMobilePhone(value)) {
          callback(new Error("手机号不正确"));
        } else {
          callback();
        }
      }
    };

    return {
      countGather: {
        addUserCount: 0,
        storedUserCount: 0,
        totalUserCount: 0,
      },
      activeName: "",
      filterTime: "",
      filterDate: 1,
      tableLoading: false,
      searchLoading: false,
      isShowMoreFilter: false, // 折叠面板
      selectOption: null, // 批量跳转操作标签
      // 分页配置
      paginationConfig: {
        direction: "center", // 分页位置
        layout: "total, sizes, prev, pager, next, jumper", // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10, // 每页条数-默认10
      },
      /**
       * 表单
       */
      filterForm: {
        customerName: "",
        phone: "",
      }, // 筛选条件
      list: [], // 会员列表
      total: null, // 会员总人数
      searchTotal: null, // 筛选人数
      rules: {
        phone: [{ validator: validatePhones, trigger: ["change"] }],
      },
      dateType: 1,
      showStoreVal: true,
    };
  },
  computed: {
    ...mapState({
      businessId: (state) => state.user.info.business.id,
    }),
  },
  mounted() {
    this.initData();
  },
  methods: {
    // async dataRadioChange(val) {
    //   let { dateType } = this;
    //   this.filterTime = [];
    //   if (!dateType) return "";
    //   this.filterDate = await getFilterFormPastTime(dateType);
    //   await this.initData();
    // },
    async initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      let date = {};
      let { businessId, filterTime, filterDate, filterForm } = this;
      let queryParams = {
        page,
        pageSize,
        businessId,
      };
      if (filterTime.length > 1) {
        date = {
          registerBeginDay: filterTime[0],
          registerEndDay: filterTime[1],
        };
      } else {
        date = {
          registerBeginDay: "",
          registerEndDay: "",
        };
      }
      this.showStoreVal =
        filterForm.phone || filterForm.customerName ? false : true;
      queryParams = Object.assign({}, queryParams, date, filterForm);
      userCountInfo(queryParams).then((res) => {
        res.code === 0 ? (this.countGather = res.data) : "";
      });
      pubManageUserlist(queryParams).then((res) => {
        if (res.code === 0) {
          let { data } = res;
          this.list = data.list;
          this.paginationConfig.total = data.total;
          this.paginationConfig.page = res.data.pageNum;
        }
      });
    },

    // 分页sizes改变
    sizesChange() {
      this.initData(1);
    },
    // 分页page改变
    pageChange() {
      this.initData();
    },

    /**
     * 按钮组
     */
    // 提交筛选表单
    submitFilterForm() {
      this.initData(1);
    },
    // 重置筛选表单
    resetFilterForm() {
      this.$refs.filterForm.resetFields();
      this.filterTime = [];
      this.initData(1);
      // this.dateType = 1;
      // this.dataRadioChange();
    },
    // 跳转详情
    goVipDetail(index, row) {
      this.$router.push({
        name: "UserDetails",
        query: { customerId: row.id },
      });
    },
    pickerChange(val) {
      // this.filterDate = "";
      // this.dateType = "";
      this.initData();
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
/* reset element*/
.vip-list {
  .el-tabs__header {
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    padding: 20px 20px 0 40px;
  }

  .el-tabs__nav-wrap::after {
    background-color: #fff;
  }

  .el-tabs__active-bar {
    height: 4px;
  }

  .vip-page {
    .vip-content {
      .left {
        max-width: 300px;
        min-width: 300px;
        background-color: #fff;
        margin-right: 10px;
        padding: 20px 10px;

        .category-tree-container {
          height: calc(100vh - 230px);
        }

        button {
          margin: 10px 10px 0 0;
        }
        .pointerEvents {
          pointer-events: none;
          opacity: 0.5;
        }
      }

      .right {
        background-color: #fff;
        padding: 20px 10px;
        overflow: hidden;

        .scrollbar-container {
          height: calc(100vh - 230px);
        }

        .list-table {
          padding: 0 10px;

          .vip-member {
            display: flex;

            .vip-avatar {
              overflow: hidden;
              flex: 0 0 68px;
              height: 68px;
              border: 1px solid #e7e7e7;
              border-radius: 20%;
              margin: 10px 10px 10px 0;
              background-color: #cccccc;
            }

            .vip-name {
              font-size: 14px;
              font-style: normal;
              font-weight: 700;
              line-height: 18px;

              .v-user-sex {
                font-size: 18px;
              }
            }

            .vip-detail {
              font-family: "苹方 中等", "苹方", sans-serif;
              font-weight: 400;
              font-style: normal;
              line-height: 22px;
            }
          }
        }
      }
    }
  }
}
</style>
